<template>
	<view class="content">
	<!-- 	<button @click="chooseImg">选择图片</button>
		<button @click="chooseFile">选择文件</button>
		<button @tap="startRecord">开始录音</button>
		<button @tap="endRecord">停止录音</button>
		<button @tap="playVoice">播放录音</button>
		<button @tap="playBg">播放背景音乐</button>
		<button @tap="chooseVideo">选择视频</button>
		<button @tap="startVideo">播放</button>
		<button @tap="stopVideo">停止</button>
		<button @tap="pauseVideo">暂停</button>
		<input v-model="dm" />
		<button @tap="sendDM">发送弹幕</button>
		<video id="myVideo" :src="videoSrc" @error="videoErrorCallback" :danmu-list="danmuList"
						    enable-danmu danmu-btn controls></video> -->
		<button @tap="startRecord">开始录像</button>
		<button @tap="stopRecord">停止录像</button>
		<button @tap="takePhoto">拍照</button>
		<image :src="imgSrc"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgSrc: '',
				recorderManager: null,
				innerAudioContext: null,
				playUrl:'',
				videoSrc:'',
				videoContext:null,
				dm:'',
				cameraContext:null
			}
		},
		onLoad() {
			this.videoContext = uni.createVideoContext('myVideo',this);
			this.cameraContext = uni.createCameraContext();
			this.recorderManager = uni.getRecorderManager();
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.autoplay = true;
			console.log(this.recorderManager)
			this.recorderManager.onStart(res=>{
				console.log('开始录音')
				console.log(res)
			})
			this.recorderManager.onPause(res=>{
				console.log('暂停录音')
				console.log(res)
			})
			this.recorderManager.onStop(res=>{
				console.log('停止录音')
				console.log(res)
				this.playUrl = res.tempFilePath;
				this.playMp3(res.tempFilePath)
			})
		},
		methods: {
			startRecord(){
				this.cameraContext.startRecord({
					success(res) {
						console.log('开始录像')
					}
				})
			},
			stopRecord(){
				this.cameraContext.stopRecord({
					success(res) {
						console.log(res)
						console.log('停止录像')
					}
				})
			},
			takePhoto(){
				this.cameraContext.takePhoto({
					success(res) {
						console.log(res)
						console.log('拍照完成')
					}
				})
			},
			sendDM(){
				this.videoContext.sendDanmu({text:this.dm,color:'#DD524D'})
				this.dm = ''
			},
			chooseVideo(){
				let that = this;
				uni.chooseVideo({
					success(res) {
						that.videoSrc = res.tempFilePath
					}
				})
			},
			startVideo(){
				this.videoContext.play()
			},
			stopVideo(){
				this.videoContext.stop()
			},
			pauseVideo(){
				this.videoContext.pause()
			},
			playBg(){
				const bgAudioManager = uni.getBackgroundAudioManager()
				bgAudioManager.title = '致爱丽丝';
				bgAudioManager.singer = '暂无';
				bgAudioManager.coverImgUrl = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png';
				bgAudioManager.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
			},
			startRecord(){
				this.recorderManager.start()
			},
			endRecord(){
				this.recorderManager.stop()
			},
			playVoice(){
				this.innerAudioContext.src = this.playUrl
			},
			playMp3(src){
				const innerAudioContext = uni.createInnerAudioContext()
				innerAudioContext.autoplay = true;
				innerAudioContext.src = src
				innerAudioContext.onPlay((res)=>{
					console.log('开始播放')
					console.log(res)
				})
			},
			async chooseFile() {
				let res = await uni.chooseImage()

				console.log(res)
			},
			async chooseImg() {
				let res = await uni.chooseImage({
					count: 2
				})
				this.imgSrc = res[1].tempFilePaths[0]
				console.log()
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.map-mine {
		width: 100%;
		height: 50vh;
	}

</style>
